<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
        <script type="text/javascript">
            function success(position) {
                var s = document.querySelector('#status');

                if (s.className == 'success') {
                    return;
                }

                s.innerHTML = "Você foi localizado!";
                s.className = 'success';

                var mapcanvas = document.createElement('div');
                mapcanvas.id = 'mapcanvas';
                mapcanvas.style.height = '400px';
                mapcanvas.style.width = '560px';

                document.querySelector('article').appendChild(mapcanvas);
                var lat = position.coords.latitude;
                var lon = position.coords.longitude;
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                var myOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeControl: false,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "Você está aqui!"
                });


                // The Google Geocoding API url used to get the JSON data

                var link1 = "http://maps.googleapis.com/maps/api/geocode/json?latlng=";
                var link2 = "&sensor=true_or_false";
                var virgula = ",";

                var geocodingAPI = link1 + lat + virgula + lon + link2;

                $.getJSON(geocodingAPI, function(json) {

                    // Set the variables from the results array
                    var address = json.results[0].formatted_address;
                    console.log('Address : ', address);

                    var latitude = json.results[0].geometry.location.lat;
                    console.log('Latitude : ', latitude);

                    var longitude = json.results[0].geometry.location.lng;
                    console.log('Longitude : ', longitude);

                    // Set the table td text
                    $('#address').text(address);
                    $('#latitude').text(latitude);
                    $('#longitude').text(longitude);

                });

// Caching the link jquery object
                var $myLink = $('a.myLink');

// Set the links properties
                $myLink.prop({
                    href: geocodingAPI,
                    title: 'Click on this link to open in a new window.'
                }).click(function(e) {
                    e.preventDefault();
                    window.open(this.href, '_blank');
                });


            }

            function error(msg) {
                var s = document.querySelector('#status');
                s.innerHTML = typeof msg == 'string' ? msg : "falhou";
                s.className = 'fail';
            }

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(success, error);
            } else {
                error('Seu navegador não suporta <b style="color:black;background-color:#ffff66">Geolocalização</b>!');
            }



        </script>

        <style type="text/css">
            body {
                font-size: 75%;
                font-family:"Segoe UI", Verdana, Helvetica, Sans-Serif;
            }
            #body {
                clear: both;
                margin: 0 auto;
                max-width: 534px;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
                margin-top: 0.75em;
                border: 0 none;
                margin-top:35px;
            }
            #body td {
                padding:15px 30px 15px 10px;
            }
            #body tr td:nth-child(1) {
                font-weight:bold;
            }
            #address {
                width:400px;
            }
        </style>
    </head>


    <body>
        <div id="body">

            <h1>Parse JSON data using jQuery.getJSON()</h1>

            <hr/>
            <table border="1">
                <tr>
                    <td>Endereço Completo:</td>
                    <td id="address"></td>
                </tr>

                <tr>
                    <td>Latitude:</td>
                    <td id="latitude"></td>
                </tr>
                <tr>
                    <td>Longitude:</td>
                    <td id="longitude"></td>
                </tr>
            </table>
        </div>

        <section>
            <article>
                <p><span id="status">Por favor aguarde enquanto nós tentamos locar você...</span></p>
            </article>
        </section>
    </body>
</html>
